<template>
  <div class="personal-center-container">
    <div class="container-title">
      <vab-card shadow="hover" :skeleton="true" skeleton-rows="1">
        <template #header>
          <span style="font-weight: bold">分类名称</span>
        </template>
        <el-radio-group v-model="categoryIdx" style="margin-bottom: 10px">
          <el-radio
            v-for="(item, index) in list"
            :key="item.category_id"
            border
            :label="index"
          >
            {{ item.category_name }}
          </el-radio>
        </el-radio-group>
      </vab-card>
      <vab-card class="h-user" :skeleton="true">
        <template #header>
          <span style="font-weight: bold">分类用户</span>
        </template>
        <el-row v-if="list[categoryIdx]" :gutter="20">
          <el-col
            v-for="item in list[categoryIdx].users"
            :key="item.corp_id"
            :lg="6"
            :md="6"
            :sm="6"
            :xl="4"
            :xs="12"
          >
            <vab-card shadow="hover">
              <div class="user-name">
                {{ item.user_name }}
              </div>
              <div class="department-name">
                {{ item.department.department_name }}
              </div>
            </vab-card>
          </el-col>
        </el-row>
        <el-row v-else justify="center">
          <el-empty description="暂无内容" />
        </el-row>
      </vab-card>
    </div>
  </div>
</template>

<script>
  import { getCategoryPool } from '@/api/enterpriseWeChat/category'
  import { Plus, Search } from '@element-plus/icons-vue'

  export default defineComponent({
    name: 'CategoryPool',
    setup() {
      const $baseTableHeight = inject('$baseTableHeight')
      const state = reactive({
        border: true,
        height: $baseTableHeight(1),
        stripe: false,
        list: [],
        listLoading: true,
        categoryIdx: 0,
      })
      const fetchData = async () => {
        state.listLoading = true
        const { data } = await getCategoryPool()
        console.log(data)
        state.list = data
        state.listLoading = false
      }
      onMounted(() => {
        fetchData()
      })

      return {
        ...toRefs(state),
        fetchData,
        Plus,
        Search,
      }
    },
  })
</script>
<style lang="scss" scoped>
  .h-user {
    flex-grow: 1;
  }
  .department-name {
    font-size: 12px;
    color: #999;
    margin-top: 5px;
  }
  .user-name {
    font-size: 16px;
  }
  .container-title {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }
  $base: '.personal-center';
  #{$base}-container {
    padding: 0 !important;
    background: $base-color-background !important;
    display: flex;
    flex-direction: column;
  }
</style>
